<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 引入 Element UI 的样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 添加样式以设置元素之间的间距 */
        .form-item {
            margin-bottom: 20px;
            width: 600px;
        }

        .submit-btn {
            margin-top: 20px;
        }

        h2 {
            text-align: center;
        }

        .error-msg {
            color: red;
            margin-top: -10px;
            margin-bottom: 5px;
            font-size: 12px;
        }
    </style>

</head>
<body>
<div id="app">
    <el-form :model="form" :rules="rules" label-width="80px">
        <h2>用户信息注册</h2>
        <el-form-item label="用户名" prop="username" class="form-item" :error="usernameError">
            <el-input v-model="form.username"></el-input>
            <div class="error-msg" v-if="usernameError">{{ usernameErrorMsg }}</div>
        </el-form-item>


        <el-form-item label="密码" prop="password" class="form-item" :error="passwordError">
            <el-input type="password" v-model="form.password"></el-input>
            <div class="error-msg" v-if="passwordError">{{ passwordErrorMsg }}</div>
        </el-form-item>

        <el-form-item label="性别" prop="gender" class="form-item">
            <el-select v-model="form.gender">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
            </el-select>
        </el-form-item>


        <el-form-item label="生日" prop="birthday" class="form-item">
            <el-date-picker type="date" v-model="form.birthday" placeholder="选择日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="昵称" prop="nickname" class="form-item">
            <el-input v-model="form.nickname"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="phone" class="form-item">
            <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item label="地址" prop="address" class="form-item">
            <el-input type="textarea" v-model="form.address"></el-input>
        </el-form-item>

        <el-form-item label="职业" prop="job" class="form-item">
            <el-input v-model="form.job"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" class="form-item" :error="codeError">
            <el-input style="width: 80px" v-model="form.code"></el-input>
            <el-button type="primary" @click="sendVerificationCode">发送验证码</el-button>
            <div class="error-msg" v-if="codeError">{{ codeErrorMsg }}</div>
        </el-form-item>

        <el-form-item class="submit-btn">
            <el-button type="primary" @click="submitForm">注册</el-button>
        </el-form-item>
    </el-form>
</div>

<!-- 引入Vue -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

<!-- 引入axios -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

<!-- 引入Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: {

            form: {

                username: '',
                password: '',
                gender: '',
                birthday: '',
                nickname: '',
                phone: '',
                address: '',
                job: '',
                code: '',
                status: "",
                flag: '2'
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '用户名长度在3到20个字符之间', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { pattern: /^\d{4}$/, message: '验证码必须是4位数字', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请输入性别', trigger: 'blur' },
                ],
                birthday: [
                    { required: true, message: '请输入生日', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    { pattern: /^1\d{10}$/, message: '电话号码必须为以1开头的11位数字', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
            },
            usernameError: false,
            usernameErrorMsg: '',
            passwordError: false,
            passwordErrorMsg: '',
            codeError: false,
            codeErrorMsg: ''
        },
        methods: {
            submitForm() {
                axios.post("/pa/users/reg", v.form).then(function (response) {
                    if (response.data.code == 2008) {
                        location.href = "/index.html";
                    } else {
                        v.$message.error(response.data.msg);
                    }
                });
            },
            sendVerificationCode() {
                // 在这里处理发送验证码的逻辑

                axios.post('/pa/sends/regyz',v.form).then(function (response) {
                    if (response.data.data == 2006) {
                        v.$message.success("发送成功");
                    } else {
                        v.$message.error("发送失败");
                    }
                });
            }
        }
    });
</script>

</body>
</html>
